<template>
  <div class="billbox">
    <div class="billxbox">
      <div class="logodiv">
        <router-link to='/'>
          <img class="logoimg" src="~@/assets/img/nlogo.png"/>
        </router-link>
      </div>
      <div class="nav nav5">
        <ul class="navul">
          <li>
            <router-link to='/'>
              <span :class="[id == 0 ? 'actborder':'']" @click="taphome" :data-index="-1" :data-indexs="0">首页</span>
            </router-link>
          </li>
          <li v-for="(item, index) in menuarr" :key="index">
            <span :class="[id == item.id ? 'actborder':'']" @click="tappage" :data-index="index" :data-indexs="0" :data-type="1">{{item.title}}</span>
            <ul>
              <li v-for="(items, indexs) in item.subNav" :key="indexs"><span @click="tappage" :data-index="index" :data-indexs="indexs" :data-type="2">{{items.title}}</span></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menuarr:[],  //导航菜单
      tapindex:-1,  //当前选中索引 1级索引
      tapindexs:0,  //当前选中索引 2级索引
      id:0,   //一级分类id 默认的时候是0
    };
  },
  created:function () {//创建实例之后获取
    //参数处理
    if(this.$route.query.id){
      this.id = this.$route.query.id;  //一级分类id
    }
    //获取分类列表
    this.getmenuarr();
  },
  methods:{
    //获取分类列表
    getmenuarr: function(e){
      var that = this;
      var data = {
      }
      that.$http('home/navs',data,'post').then(function (res) {
          if(res.code == 200){
            that.menuarr = res.result;
          }else{
            that.$notify.error({
              title: "系统提示",
              message: res.message
            });
          }
      }).catch(function (error) {
          console.log("请求失败")
          console.log(error)
      })
    },
    //跳转首页
    taphome:function(e){
      var that = this;
      that.tapindex = e.currentTarget.dataset.index;  //当前选中索引 1级索引
      that.tapindexs = e.currentTarget.dataset.indexs;  //当前选中索引 2级索引
      // that.$store.state.tapindex = e.currentTarget.dataset.index; //当前选中索引
    },
    //点击导航
    tappage:function(e){
      var that = this;
      that.tapindex = e.currentTarget.dataset.index;  //当前选中索引 1级索引
      that.tapindexs = e.currentTarget.dataset.indexs;  //当前选中索引 2级索引
      // that.$store.state.tapindex = e.currentTarget.dataset.index; //当前选中索引
      var type = e.currentTarget.dataset.type;   //分类类型 1一级 2二级
      //公共参数
      var id = that.menuarr[that.tapindex].id;
      var code = that.menuarr[that.tapindex].code;
      var title = that.menuarr[that.tapindex].title;
      if(type == 1){
        var path = that.menuarr[that.tapindex].path;
        var openType = that.menuarr[that.tapindex].openType;  //跳转类型 1内链 2外链
        var pageTyep = that.menuarr[that.tapindex].pageTyep;  //页面类型：1图文 2图片 3视频 4音频 5其他
        if(openType == 1){
          //跳转页面(判断是否存在子级 存在默认取值第一个)
          if(that.menuarr[that.tapindex].subNav != ''){
            //追加参数
            var tid = that.menuarr[that.tapindex].subNav[0].id;  //二级id
            var tcode = that.menuarr[that.tapindex].subNav[0].code;  //二级code
            var ttitle = that.menuarr[that.tapindex].subNav[0].title; //二级title
            var openType = that.menuarr[that.tapindex].subNav[0].openType; //跳转类型 1内链 2外链
            var pageTyep = that.menuarr[that.tapindex].subNav[0].pageTyep; //页面类型：1图文 2图片 3视频 4音频 5其他
            this.$router.push(`${path}?id=${id}&code=${code}&title=${title}&tid=${tid}&tcode=${tcode}&ttitle=${ttitle}&pageTyep=${pageTyep}`)
          }else{
            this.$router.push(`${path}`)
          }
        }
        if(openType == 2){
          window.open(path,'_blank')
        }
      }
      if(type == 2){
        var path = that.menuarr[that.tapindex].subNav[that.tapindexs].path;
        //追加参数
        var tid = that.menuarr[that.tapindex].subNav[that.tapindexs].id;  //二级id
        var tcode = that.menuarr[that.tapindex].subNav[that.tapindexs].code;  //二级code
        var ttitle = that.menuarr[that.tapindex].subNav[that.tapindexs].title; //二级title
        var openType = that.menuarr[that.tapindex].subNav[that.tapindexs].openType; //跳转类型 1内链 2外链
        var pageTyep = that.menuarr[that.tapindex].subNav[that.tapindexs].pageTyep; //页面类型：1图文 2图片 3视频 4音频 5其他
        if(openType == 1){
          //跳转页面
          this.$router.push(`${path}?id=${id}&code=${code}&title=${title}&tid=${tid}&tcode=${tcode}&ttitle=${ttitle}&pageTyep=${pageTyep}`)
        }
        if(openType == 2){
          window.open(path,'_blank')
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.billbox{
  width: 100%;
  background: #005FC3;
  .billxbox{
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
/* All */
.logodiv{
  width: 150px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  .logoimg{
    width: 141px;
    height: 46px;
    cursor: pointer;
  }
}
.nav {
  flex: 1;
}
.navul {
  *zoom: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #005FC3;
  display: flex;
  justify-content: flex-end;
}
.navul:before,
.navul:after {
  content: "";
  display: table;
}
.navul:after {
  clear: both;
}
.navul > li {
  float: left;
  position: relative;
}
.nav span {
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  display: block;
  color: #fff;
  border-left: 1px solid #005FC3;
  cursor: pointer;
  // border-bottom: 4px solid #FFF;
}
.actborder{
  border-bottom: 4px solid #FFF;
}
.nav span:hover {
  text-decoration: none;
  background: #0874E5;
}
.nav li ul {
  background: #273754;
}
.nav li ul li {
  width: 100px;
}
.nav li ul span {
  border: none;
  cursor: pointer;
}
.nav li ul span:hover {
  background: rgba(0, 0, 0, 0.2);
}
/* Fold Out
============================== */
.nav5 ul > li:hover ul {
  max-height: 1000px;
  -webkit-transform: perspective(400) rotate3d(0, 0, 0, 0);
}
.nav5 li ul {
  position: absolute;
  left: 0;
  top: 60px;
  z-index: 10000;
  max-height: 0;
  overflow: hidden;
  -webkit-transform: perspective(400) rotate3d(1, 0, 0, -90deg);
  -webkit-transform-origin: 50% 0;
  -webkit-transition: 350ms;
  -moz-transition: 350ms;
  -o-transition: 350ms;
  transition: 350ms;
}

</style>